<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件注册</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<!-- 1 组件名 -->
		<!-- 1.1 组件名大小写 -->
		<div id="app1">
			<my-component-name></my-component-name>
		</div>
		<hr />
		<div id="app2">
			<!-- <MyComponentName2></MyComponentName2> 报错：Unknown custom element: <mycomponentname2> - did you register the component correctly? For recursive components, make sure to provide the "name" option. -->
			<my-component-name2></my-component-name2> <!-- 要这么写，即使注册组件时使用了 PascalCase ，使用组件时还是要使用 kebab-case 来引用组件 -->
		</div>
		<hr />
		<!-- 2 全局注册 -->
		<div id="app3">
			<component-a></component-a>
			<component-b></component-b>
			<component-c></component-c>
		</div>
		<hr />
		<!-- 3 局部注册 -->
		<div id="app4">
			<component-a2></component-a2>
			<component-b2></component-b2>
		</div>
		<hr />
		<!-- 4 模块系统 -->
		<hr />
		<!-- 4.1 在模块系统中局部注册 -->
		<hr />
		<!-- 4.2 基础组件的自动化全局注册 -->
		<hr />
		<script type="text/javascript">
			// 1 组件名
			// 1.1 组件名大小写
			//   定义组件名的方式有两种：
			//     使用 kebab-case（短横线分隔命名）
			Vue.component('my-component-name', {
				template: "<div>my-component-name</div>"
			})
			new Vue({
				el: '#app1'
			})
			//     使用 PascalCase（首字母大写命名，又称为 驼峰命名）
			Vue.component('MyComponentName2', {
				template: '<div>MyComponentName2</div>'
			})
			new Vue({
				el: '#app2'
			})
			/* 当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
			也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
			注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
			 */
			// 2 全局注册
			//   这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
			//     在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
			Vue.component('component-a', {
				template: '<div>global component-a</div>'
			})
			Vue.component('component-b', {
				template: '<div>global component-b</div>'
			})
			Vue.component('component-c', {
				template: '<div>global component-c<br>component-a in component-c: <component-a></component-a></div>'
			})
			
			new Vue({
				el: '#app3'
			})
			
			// 3 局部注册
			var ComponentA2 = {template: '<div>local component-a2</div>'}
			// 注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
			var ComponentB2 = {
				template: '<div>local component-b2<br/>component-a2 in component-b2: <component-a2></component-a2></div>',
				components: {
					'component-a2': ComponentA2
					// 'component-c2': ComponentC2 // 报错：Unknown custom element: <component-c2>，RCA：注册 ComponentB2 时，ComponentC2 组件还未注册
				}
			}
			var ComponentC2 = {template: '<div>local component-c2</div>'}
			new Vue({
				el: '#app4',
				components: {
					'component-a2': ComponentA2,
					'component-b2': ComponentB2
				}
			})
			
			
			// 4 模块系统 （目前还未学到，暂时不看）
			// 4.1 在模块系统中局部注册
			// 4.2 基础组件的自动化全局注册
		</script>
	</body>
</html>
